<template>
  <div
    id="app"
    v-cloak
  >
    <NavBar v-if="!hideNavBar" />
    <NavBarForTab v-if="showTabbar && !source" />
    <div class="main-container">
      <router-view />
    </div>
    <Tabbar v-if="showTabbar" />
  </div>
</template>

<script>
import { getErrorCode } from '@/api/errorCode';
import { getUrlParam } from '@/utils/index.js';

import NavBarForTab from '@/components/NavbarForTab';
import NavBar from '@/components/NavBar';
import Tabbar from '@/components/Tabbar';

export default {
  name: 'Home',
  components: {
    NavBarForTab,
    NavBar,
    Tabbar
  },
  data() {
    return {
      source: ''
    };
  },
  computed: {
    hideNavBar() {
      return this.$route.meta.hideNavBar ? true : false;
    },
    showTabbar() {
      return this.$route.meta.showTabbar ? true : false;
    }
  },
  created() {
    this.getErrorCode();

    let source = getUrlParam('source') || '';
    this.source = source;
    console.log('source---', source);
  },
  methods: {
    // 获取错误码翻译表
    getErrorCode() {
      getErrorCode().then(res => {
        localStorage.setItem('errorCode', JSON.stringify(res.data));
      });
    }
  }
};
</script>

<style lang="scss" scoped>
#app {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding-bottom: constant(safe-area-inset-bottom); ///兼容 IOS<11.2/
  padding-bottom: env(safe-area-inset-bottom); ///兼容 IOS>11.2/
  overflow: hidden;

  .main-container {
    flex: 1;
    height: 0;
  }
}
</style>